<template>
	<view class="flex-col mt-16 list-item">
		<view class="flex-row items-center group_5">
			<text class="font_3">{{data.title}}</text>
			<view class="group_6 ml-9">
				<text class="font_4">￥</text>
				<text class="font_2">{{data.fees||'--'}}</text>
				<text class="font_5 text_5">/只</text>
			</view>
		</view>
		<view class="mt-8 flex-row group_7">
			<image class="image_5" :src="data.photo" />
			<view class="ml-8 flex-col flex-1 group_8">
				<view class="flex-row items-center">
					<view class="section_2"></view>
					<text class="font ml-5">{{data.partyAddress||'--'}}</text>
				</view>
				<view class="mt-12 flex-row justify-start items-start relative">
					<u-image v-for="(item,index) in data.pets" shape="circle" :src="item.frontalView" height="48rpx" width="48rpx"
						:key="index" />
				</view>
			</view>
		</view>
		<view class="mt-8 flex-row justify-between items-center">
			<text class="font_6">{{data.partyTime||'--'}}</text>
			<view class="flex-row items-center group_9">
				<image class="shrink-0 image_9" src="/static/index/animal.png" />
				<text class="font_7 text_7">{{data.num||'--'}}只</text>
				<image class="shrink-0 image_10" src="/static/index/location2.png" />
				<text class="font_8 text_8">{{data.distance||'--'}}km</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: {
					distance: "",
					fees: 0,
					introduce: "",
					lat: 0,
					lng: 0,
					num: 0,
					partyAddress: "",
					partyTime: "",
					photo: "",
					remark: "",
					title: "",
					pets: []
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ml-9 {
		margin-left: 18rpx;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.list-item {
		padding: 0 16rpx 28rpx;
		background-color: #ffffff;
		border-radius: 16rpx;

		&:first-child {
			margin-top: 0;
		}

		.group_5 {
			padding: 28rpx 8rpx 20rpx;
			border-bottom: solid 2rpx #f3f3f3;

			.font_3 {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 700;
				color: #000000;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				flex: 1;
			}

			.group_6 {

				.font_4 {
					font-size: 24rpx;
					color: #ff7676;
				}

				.font_2 {
					font-size: 40rpx;
					color: #ff7676;
				}

				.font_5 {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 700;
					color: #999999;
				}

			}
		}

		.group_7 {
			padding: 0 8rpx;

			.image_5 {
				border-radius: 16rpx;
				width: 104rpx;
				height: 104rpx;
			}

			.group_8 {
				margin-top: 8rpx;

				.section_2 {
					background-color: #fcd610;
					border-radius: 50%;
					width: 16rpx;
					height: 16rpx;
				}

				.font {
					font-size: 28rpx;
					font-family: PingFang SC;
					color: #333333;
				}



				.image_6 {
					width: 80rpx;
					height: 48rpx;
				}

				.image_7 {
					margin-left: 8rpx;
					width: 48rpx;
					height: 48rpx;
				}

				.image_8 {
					border-radius: 50%;
					width: 48rpx;
					height: 48rpx;
				}

				.pos_2 {
					position: absolute;
					left: 72rpx;
					bottom: 0;
				}

				.pos_3 {
					position: absolute;
					left: 104rpx;
					bottom: 0;
				}
			}
		}

		.font_6 {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 700;
			color: #000000;
		}

		.group_9 {
			margin-right: 12rpx;

			.image_9 {
				width: 33.58rpx;
				height: 30.42rpx;
			}

			.font_7 {
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #999999;
			}

			.text_7 {
				margin-left: 8rpx;
			}

			.image_10 {
				margin-left: 32rpx;
				width: 26rpx;
				height: 26rpx;
			}

			.font_8 {
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #999999;
			}

			.text_8 {
				margin-left: 8rpx;
			}
		}
	}
</style>